<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>重点水库水生态智慧管理平台</title>
    <!-- 引入Element -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="${contextPath}/css/ElementCss/theme/index.css">
    <link rel="stylesheet" href="${contextPath}/css/home.css"/>
    <link rel="stylesheet" href="${contextPath}/css/head.css"/>
    <style>
        .buttonDay {
            border: none;
            background: #F4F4F4;
            width: 45px;
            height: 30px;
            text-align: center;
            float: left;
            line-height: 30px;
            cursor: pointer;
            margin-right: 10px;
        }

        .buttonDaySelt {
            background: #676767;
            color: #ffffff;
        }

        .buttonTitle {
            float: left;
            margin-right: 10px;
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="main" v-cloak>
    <div>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="气温" name="气温"></el-tab-pane>
            <el-tab-pane label="降水" name="降水"></el-tab-pane>
            <el-tab-pane label="湿度" name="相对湿度"></el-tab-pane>
            <%--<el-tab-pane label="风速" name="风速"></el-tab-pane>--%>
            <el-tab-pane label="气压" name="气压"></el-tab-pane>
            <%--<el-tab-pane label="风向" name="风向"></el-tab-pane>--%>
        </el-tabs>
    </div>
    <div>

        <div class="buttonTitle">近七天实时数据：</div>
        <div class="buttonDay" :class="{buttonDaySelt:daySelectNum==6}" @click="daySelectNum=6">{{TitleDate6}}</div>
        <%--6--%>
        <div class="buttonDay" :class="{buttonDaySelt:daySelectNum==5}" @click="daySelectNum=5">{{TitleDate5}}</div>
        <%--5--%>
        <div class="buttonDay" :class="{buttonDaySelt:daySelectNum==4}" @click="daySelectNum=4">{{TitleDate4}}</div>
        <%--4--%>
        <div class="buttonDay" :class="{buttonDaySelt:daySelectNum==3}" @click="daySelectNum=3">{{TitleDate3}}</div>
        <%--3--%>
        <div class="buttonDay" :class="{buttonDaySelt:daySelectNum==2}" @click="daySelectNum=2">{{TitleDate2}}</div>
        <%--2--%>
        <div class="buttonDay" :class="{buttonDaySelt:daySelectNum==1}" @click="daySelectNum=1">{{TitleDate1}}</div>
        <%--1--%>
        <div class="buttonDay" :class="{buttonDaySelt:daySelectNum==0}" @click="daySelectNum=0">{{TitleDate0}}</div>
        <%--0--%>

        <br/>

        <%--<el-button>{{TitleDate7}}</el-button>--%>
        <%--<el-button>{{TitleDate6}}</el-button>--%>
        <%--<el-button>{{TitleDate5}}</el-button>--%>
        <%--<el-button>{{TitleDate4}}</el-button>--%>
        <%--<el-button>{{TitleDate3}}</el-button>--%>
        <%--<el-button>{{TitleDate2}}</el-button>--%>
        <%--<el-button>{{TitleDate1}}</el-button>--%>
    </div>

</div>
<div id="eChartsDiv" style="height:80%;width: 60%">
</div>


</body>
<script src="${contextPath}/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="${contextPath}/js/elementIndex.js"></script>
<script src="${contextPath}/js/vue-resource.js"></script>
<script src="${contextPath}/js/echarts.min.js"></script> <!-- 统计图 -->
<script>
    /// var SITEID=parent.window.document.getElementById("stdeIDElem").value;
    var SITEID = "eb25fc966d9911eab058309c2317ee3e";

    var em = new Vue({
        el: main,
        data: {
            TitleDate0: "",
            TitleDate1: "",
            TitleDate2: "",
            TitleDate3: "",
            TitleDate4: "",
            TitleDate5: "",
            TitleDate6: "",
            TitleDateArray: null,
            activeName: '气温',
            daySelectNum: 0,
        }, created: function () {
            this.getSevenDay();
            this.loadeChart();
        }, watch: {
            'daySelectNum': {
                handler(newValue, oldValue) {
                    // console.log(newValue);
                    this.loadeChart();
                }
            }, 'activeName': {
                handler(newValue, oldValue) {
                    // console.log(newValue);
                    this.loadeChart();
                }
            },
        },
        methods: { //事件
            getSevenDay() {  //获取七天数据
                this.$http.get('../home/returnSevenDay.do', {emulateJSON: true}).then(function (res) {
                    this.TitleDateArray = res.data;
                    this.TitleDate0 = getTime(res.data[0], "M");
                    this.TitleDate1 = getTime(res.data[1], "M");
                    this.TitleDate2 = getTime(res.data[2], "M");
                    this.TitleDate3 = getTime(res.data[3], "M");
                    this.TitleDate4 = getTime(res.data[4], "M");
                    this.TitleDate5 = getTime(res.data[5], "M");
                    this.TitleDate6 = getTime(res.data[6], "M");
                });
            }, handleClick() {

            },
            loadeChart() {
                this.$http.get('../home/returnMapSevenDayChart.do?number=' + this.daySelectNum + "&type=" + this.activeName + "&SiteID=" + SITEID, {emulateJSON: true}).then(function (res) {
                    console.log(res);
                    var myChart = echarts.init(document.getElementById('eChartsDiv'));
                    var option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        xAxis: {
                            type: 'category',
                            data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: res.data,
                            type: 'line'
                        }]
                    };
                    myChart.setOption(option);
                });

            },
        }
    });

    //时间戳转换日期
    function getTime(data, type) {
        var _data = data;
        //如果是13位正常，如果是10位则需要转化为毫秒
        if (String(data).length == 13) {
            _data = data
        } else {
            _data = data * 1000
        }
        const time = new Date(_data);
        const Y = time.getFullYear();
        const Mon = time.getMonth() + 1;
        const Day = time.getDate();
        const H = time.getHours();
        const Min = time.getMinutes();
        const S = time.getSeconds();
        //自定义选择想要返回的类型
        if (type == "Y") {
            <%--return `${Y}-${Mon}-${Day}`--%>
            return Y + "-" + Mon + "-" + Day;
        } else if (type == "D") {
            <%--return `${Y}-${Mon}-${Day}`--%>
            return Day;
        } else if (type == "M") {
            <%--return `${Y}-${Mon}-${Day}`--%>
            return Mon + "-" + Day;
        } else if (type == "H") {
            return H + ":" + Min + ":" + S;
        } else {
            return Y + "-" + Mon + "-" + Day + " " + H + ":" + Min + ":" + S;
        }
    }
</script>
</html>
